html
<!DOCTYPE html>
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝侧边栏</title>
    <style>
        .main{
            width:1200px;
            height: 2000px;
            margin: 0 auto;
            background: pink;
        }
        .slider{
            height: 200px;
            width: 60px;
            background: green;
            /* 淘宝侧边栏 */
            position: fixed;
            /* right: 100px; 问题 随着浏览器宽度改变而改变位置*/
             bottom: 200px; 
            right: 50%;
            
            /* 向右移动，right参考的是右边，所有移动main宽度的一半加上 slider宽度 */
            /* margin-right: -660px; */
            /* 侧边栏和内容区域有10px距离 */
            margin-right: -670px;
        }
    </style>
</head>
<body>
 
    
    <div class="main">
        <div class="slider"></div>
    </div>
</body>
</html>